<template>
	<view class="base">
		<view class="data-info result" v-for="syntheticData in vibration" :key="syntheticData.id">
			<view class="tabel">
				{{syntheticData.title}}数据
			</view>
			<view class="info">
				<view class="item" v-for="item in syntheticData.list" :key="item.value">
					<view class="item-top" v-if="deviceInfo.status == 1">
						<view :class="item.status == 0 ?'text':'error'">
							{{ item.status == 0?'正常':'异常'}}
						</view>
					</view>
					<view class="item-top" v-else >
						<view class="text">
							未知
						</view>
					</view>
					<view class="item-bot" v-if="deviceInfo.status == 1">
						<view class="text" style="color:#FFF;">
							{{item.name}}
						</view>
					</view>
					<view class="item-bot" v-else style="color: red;">
						<view class="text">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="card result">
			<view class="title bold">
				<div class="star" :class="iconClass">
					<image :src="iconStar" class="icon" />
					<view class="score">
						{{ radarData ? radarData.score || "-" : "-" }}
					</view>
					<view class="star-text">分</view>
				</div>
				<view class="text">
					<view class="tabel">
						结论和建议：
					</view>
					{{ radarData ? radarData.conclusion || "" : "" }}
				</view>
			</view>
		</view> -->
    </view>
</template>

<script>
import { imgBaseUrlV2 } from "@/common/config";
import * as echarts from "@/pageA/lime-echart/echarts";
import lEchart from "@/pageA/lime-echart/index";
import {
	getDeviceRadarData,
	getDeviceSyntheticData,
} from "@/common/api/equipment";
import NoData from "@/components/public/noData/noData";
import { getDeviceWarningValue } from "@/common/api/equipment";
import CircleProgress from "@/components/public/circle-progress/circle-progress";
export default {
	components: {
		lEchart,
		NoData,
		CircleProgress,
	},
	props: {
		deviceInfo: {
			type: [Object],
			default: null,
		},
		radarData: {
			type: [Object],
			default: null,
		},
		GroupId:{
			type: [Number,String],
			default: null,
		},
		device_id: {
			type: [String, Number],
			default: "",
		},
	},
	data() {
		let center;
		// #ifdef H5
		center = ["50%", "55%"];
		// #endif;
		// #ifndef H5
		center = ["50%", "middle"];
		// #endif;
		return {
			showExpand: false,
			expand: false,
			imgBaseUrlV2,
			indicators: [],
			vibration: []
		}
	},
	computed: {
		iconStar() {
			let s = this.radarData ? this.radarData.score : "";
			let i =
				s == "-" || s >= 70
				  ? "shebi_fire.png"
				  : s >= 40
				  ? "fenshu_green.png"
				  : "fenshu_red.png";
			  return imgBaseUrlV2 + i;
		},
		iconClass() {
			let s = this.radarData ? this.radarData.score : "";
			let i = s == "-" || s >= 70 ? "primary" : s >= 40 ? "warning" : "danger";
			return i;
		},
	},
	methods: {
		handlefollow() {
			this.$emit('handlefollow')
		},
		getDeviceSyntheticsData(){
			if (!this.device_id) return;
            uni.showLoading({
                title: "加载中",
            });
			return getDeviceSyntheticData({
				device_id: this.device_id
			}).then((res) => {
				if (res.code !== this.$ERR_OK) {
					return this.message.error(res.message || "获取综合概况数据失败");
				}
				let data = res.data || [];
				this.vibration = data
                uni.hideLoading();
			}).catch((err) => {
                uni.hideLoading();
            });
		},
	
		computedExpand() {
		  // return;
			if (!this.query) {
				this.query = uni.createSelectorQuery().in(this);
			}
			this.query.select("#equimentBaseContent").boundingClientRect((data) => {
				if (data && data.height > 66) {
					this.showExpand = true;
				}
			}).exec();
		},
		pageScroll() {
			return new Promise((r) => {
				// return;
				if (!this.query) {
				  this.query = uni.createSelectorQuery().in(this);
				}

				this.query
				  .select("#equiment-detail-chart")
				  .boundingClientRect((data) => {
					r(data);
				}).exec();
			});
		},
	},
	mounted() {
		this.computedExpand();
        this.getDeviceSyntheticsData();
	},
	watch: {
		device_id(n, o) {
			if (n !== o) {
               
				
			}
		},
	},
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.base {
  .base-top {
	width:100%;
	padding: 0 20rpx 20rpx
	.top{
		display:flex;
		align-items: center;
		justify-content:space-between;
		.name{
			position:relative;
			color: color-white;
			padding: 10rpx 53rpx 10rpx 100rpx;
			.bg {
				position:absolute;
				top: 0;
				left: 0;
				width: 100%;
			}
			.online {
				width: 53rpx;
				position:absolute;
				top: 7%;
				left: 7%;
			}
		}
		.follow{
			height:50rpx;
			line-height:50rpx;
			color:#999999;
			border: 1rpx solid#666666;
			border-radius:4rpx;
			padding:0 15rpx;
			font-size:28rpx;
		}
	}
	.device-img {
		width:100%;
		height: 420rpx;
		.imgs{
			width:100%
		}
	}
  }
  .data-info {
	background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
	border-radius: 10px;
	// color: #ffffff;
	.tabel {
	  color: #fff;
	  font-weight : 700;
	  font-size :28rpx;
	  position: relative;
	  margin-bottom :15px;
	}
	.tabel::before {
	  content: ""
	  width: 6rpx;
	  height: 14px;
	  background: #FFFFFF;
	  position:absolute;
	  top: 11rpx;
	  left: -18rpx;
	}
	.info {
		display:flex;
		flex-wrap:wrap;
		.item {
			width: 22%
			margin: 0 15rpx 20rpx 0;
			.item-top {
				width:100%;
				position: relative;
				z-index : 10;
				.text {
					position: relative;
					z-index : 10;
					color:#33A638;
					font-family: YouSheBiaoTiHei;
					text-align :center;
					padding-left:35rpx;
					font-weight:700;
				}
				.error {
					position: relative;
					z-index : 10;
					color:#DC2A2A;
					font-family: YouSheBiaoTiHei;
					text-align :center;
					padding-left:35rpx;
					font-weight:700;
				}
				&:after {
					position: absolute;
					z-index: 1;
					content: '';
					width: 100%;
					height: 100%;
					left: 20rpx;
					top: 0;
					background: #4B5472;
					// border-radius: 0 10rpx 0 0;
					transform: skew(-8deg);
				}
			}
			.item-bot{
				text-align center
				max-width:100%;
				height: 70rpx;
				line-height:70rpx;
				position: relative;
				z-index : 10;
				.text {
					font-size: 20rpx;
					color: #fff;
					position: relative;
					z-index : 10;
					text-align :center;
					padding-left :18rpx;
					height:100%;
					overflow:hidden;
				}
				&:after {
					position: absolute;
					z-index: 1;
					content: '';
					width: 95%;
					height: 100%;
					left: 13rpx;
					top: -2rpx;
					// background: #4B5472;
					border:4rpx solid#4B5472;
					transform: skew(-8deg);
				}
			}
		}
		.no-data{
			width :100%;
			text-align :center;
			color :#fff;
		}
	}
  }
  .card {
    background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
    border-radius: 10px;
	color: #ffffff;
    .bold {
      font-family: PingFangSC-Regular;
      // font-weight: 700;
    }
  }
}

.result, .indicator, .chart {
  margin: 0 24rpx 30rpx;
  padding: 0 20rpx;
}

.result {
  font-size: 24rpx;
  padding: 30rpx 20rpx;
  line-height: 44rpx;

  .content {
    max-height: 124rpx;
    overflow: hidden;
    no-wraps(3);

    &.active {
      max-height: inherit;
      no-wraps(50);
    }
  }

  .expand {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: color-desc;
    margin-top: 16rpx;
    line-height: 1;

    .icon {
      width: 28rpx;
      height: 28rpx;
      transition: transform 0.3s;
      margin-left: 12rpx;
    }

    &.active {
      .icon {
        transform: rotate(180deg);
      }
    }
  }
}

.title {
  display: flex;
  font-size: 24rpx;
  font-family: PingFangSC-Regular;
  color: #ffffff;
  margin-bottom: 30rpx;
  align-items: center;

  >.text {
	margin-left: 20rpx;
    flex: 1;
  }

  >.star {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;

    &.primary {
      color: color-active;
    }

    &.warning {
      color: color-warning;
    }

    &.danger {
      color: color-danger;
    }

    >.icon {
      position: absolute;
      width: 120rpx;
      height: 120rpx;
    }
	>.score {
		position: absolute;
		top: 19%;
		left: 50%;
		margin-left: -20rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color:#fff;
	}
    >.star-text {
	  position: absolute;
	  top: 44%;
	  left: 50%;
	  margin-left: -12rpx;
	  text-align:center;
	  color: color-white;
      font-size: 24rpx;
    }
  }
}

.no-data-box {
  padding: 162rpx 0 80rpx;
}

.indicator {
  display: flex;
  flex-wrap: wrap;
  padding: 0;

  >.item {
    display: flex;
    flex-direction: column;
    width: 340rpx;
    min-height: 190rpx;
    margin-right: 22rpx;
    margin-top: 20rpx;
    align-items: center;
    justify-content: center;
    padding: 16rpx;

    >.num {
      display: flex;
      width: 100%;
      color: color-default;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      align-items: center;
      justify-content: center;
      line-height: 1;

      &.danger {
        color: color-danger;
      }

      &.success {
        color: color-success;
      }

      >.icon {
        display: flex;
        width: 32rpx;
        height: 32rpx;
        margin-left: 12rpx;
        margin-top: 2rpx;
      }
    }

    >.name {
      width: 100%;
      text-align: center;

      >.display_name {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: color-default;
        line-height: 1;
        no-wrap();
      }

      >.desc {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 1;
        padding: 18rpx 0;
      }
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    &:nth-child(-n + 2) {
      margin-top: 0;
    }
  }
}

.chart {
  height: 550rpx;
  margin-bottom: 0;
}
</style>